<!-- 新增/编辑 组织机构 -->
<template>
  <a-modal v-model:visible="visible" width="45vw" title="修改承租人信息" unmount-on-close>
    <page-form class="page-form" :rules="rules" :model="form" layout="vertical" ref="formRef">
      <a-alert class="a-alert" v-if="form.memberType === 2">
        <template #icon>
          <icon-exclamation-circle />
        </template>
        <div class="alert-item">此处支持新增会员或更换会员，不支持修改会员的基本信息，如需修改请点击【修改已选承租人信息】</div>
      </a-alert>
      <customer ref="customerRef" mode="editLesseeMemberModal" :isListEditMember="true" type="editMember" />
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="onCancel">关闭</a-button>
        <a-button type="primary" @click="onConfirm" :loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref, provide } from 'vue'
  import { Notification } from '@arco-design/web-vue'
  import { getShortOrdrDetails, editMemberInfo, findByPhone } from '@/api/order/sOrder'
  import { usePageDict } from '@/hooks/useDict'
  import customer from '../../form/components/customer.vue'
  const emit = defineEmits(['ok'])
  const visible = ref(false)
  const dict = usePageDict('shortOrderDict')
  provide('dict', dict)

  const form = ref({})
  provide('form', form)

  // 表单规则
  const rules = {
    memberType: { required: true, message: '请选择客户类型' },
    memberPhone: [
      { required: true, message: '请输入联系电话' },
      { minLength: 11, match: /^[0-9]+$/, message: '仅支持数字，长度11位' },
    ],
    memberName: { required: true, message: '请输入承租人' },
    cardNumber: { match: /^[a-zA-Z0-9]+$/, message: '支持数字、英文' },
    clientId: { required: true, message: '请选择客户公司名称' },
  }

  const customerRef = ref()
  const open = (record, editData = undefined) => {
    visible.value = true
    getShortOrdrDetails({ id: record.id }).then(({ result }) => {
      const orderInfo = result.orderInfo
      const memberInfoDto = result.memberInfoDto || {}
      // 更新 form
      form.value = {
        id: record.id,
        memberType: orderInfo.memberType,
        // 个人用户
        memberPhone: memberInfoDto.phone,
        memberName: orderInfo.memberName,
        // 企业用户
        clientId: orderInfo.clientId,
        memberId: orderInfo.memberId,
        // 通用
        cardType: memberInfoDto.cardType || 0,
        cardNumber: memberInfoDto.cardNumber,
        cardAddress: memberInfoDto.cardAddress,
        // 驾驶证正反面信息
        driverFrontFileId: memberInfoDto?.driverFrontFileId,
        driverReverseFileId: memberInfoDto?.driverReverseFileId,
        // 身份证明正反面信息
        idCardFrontFileId: memberInfoDto?.idCardFrontFileId,
        idCardReverseFileId: memberInfoDto?.idCardReverseFileId,
      }
      if (editData) {
        findByPhone({ phone: editData.memberPhone }).then(({ result }) => {
          form.value.cardType = result.cardType || 0
          form.value.cardNumber = result.cardNumber
          form.value.cardAddress = result.cardAddress
          form.value.memberPhone = editData.memberPhone
          form.value.memberName = editData.memberName
          form.value.clientId = result.clientId
          form.value.memberId = result.memberId
          form.value.driverFrontFileId = result?.driverFrontFileId
          form.value.driverReverseFileId = result?.driverReverseFileId
          form.value.idCardFrontFileId = result?.idCardFrontFileId
          form.value.idCardReverseFileId = result?.idCardReverseFileId
        })
      }
      // 更新显示上传驾驶证按钮
      customerRef.value.updateUploadDriverBtnStatus(!memberInfoDto?.driverFrontFileId || !memberInfoDto?.driverReverseFileId)
      // 更新显示上传身份证明按钮
      customerRef.value.updateUploadIdCardBtnStatus(
        !memberInfoDto?.idCardFrontFileId || (memberInfoDto?.cardType == 0 && !memberInfoDto?.idCardReverseFileId)
      )
      customerRef.value.updateMemberInfo(memberInfoDto)
    })
  }
  const okLoading = ref(false)
  const onCancel = () => {
    okLoading.value = false
    visible.value = false
  }
  const formRef = ref()
  provide('formRef', formRef)
  const onConfirm = () => {
    formRef.value.validate((error) => {
      if (!error) {
        const param = {
          ...form.value,
        }
        okLoading.value = true
        editMemberInfo(param)
          .then(() => {
            Notification.success('保存成功')
            visible.value = false
            emit('ok')
          })
          .finally(() => {
            okLoading.value = false
          })
      }
    })
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .page-form {
    min-height: 300px;
    overflow-x: hidden;
  }
  .a-alert {
    font-size: 14px;
    font-weight: 400;
    color: #1d2129;
    margin-bottom: 20px;
  }
</style>
